<template>
    <el-input v-model="searchInput" :style="{ width: '100%' }" placeholder="请输入二级系统名称" :prefix-icon="Search" />
    <div class="min-h-[50vh]">
        <multipleSelectList v-model="checkedItem" :data-list="tabsList" label="systematicName" value="systematicId"
            :is-check="true" />
    </div>
</template>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import multipleSelectList from '@/components/multipleSelectList/multipleSelectList.vue'
import { cloneDeep } from '@pureadmin/utils';
type FormProps = {
    isLoading: boolean,
    list: any[],
    activeName: any
}
const props = withDefaults(defineProps<FormProps>(), {
    isLoading: false,
    list: () => [],
    activeName: () => { }
});

const checkedItem = ref(props.activeName)
const searchInput = ref('')
const tabsList = computed(() => {
    return cloneDeep(props.list).filter((item: any) => {
        return item.systematicName.includes(searchInput.value)
    })
})

function getCheckedItem() {
    return checkedItem.value;
}

defineExpose({ getCheckedItem });
</script>
<style lang="scss" scoped></style>